<template>
    <div class="app-container">
        <!-- 表格-条件筛区域  -->
        <div class="filter-container">
            <el-input placeholder="请输入赛事名称" v-model="searchParam.SEARCH_LIKE_name" style="width: 200px;"
                      class="filter-item" @keyup.enter.native="handleFilter"/>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter"> 搜索</el-button>
            <el-button class="filter-item" type="default" icon="el-icon-search" @click="searchReset"> 重置</el-button>
        </div>

        <!-- 表格-内容区域 -->
        <el-table v-loading="listLoading" :key="tableKey" :data="tableList" border fit highlight-current-row
                  style="width: 100%;">
            <el-table-column v-for="column in columns" :key="column.prop"
                             :prop="column.prop"
                             :label="column.label"
                             :width="column.width"
                             :align="column.align?column.align:'center'"
                             :min-width="column.minWidth"
                             :sortable="column.sortable"
                             :fixed="column.fixed"
                             :type="column.type" :formatter="column.formatter">
                <template slot-scope="scope">
                    <!-- 行内显示图片 -->
                    <img v-if="column.imgFlag==true"
                         :src=" scope.row[column.prop].indexOf('http://') >-1 ?  scope.row[column.prop] : ( CMBASE.baseFileContext + scope.row[column.prop] ) "
                         width="60" height="60" class="img" alt=""/>
                    <!-- 行内显示开关按钮 -->
                    <el-switch v-else-if="column.switchFlag==true" v-model="scope.row[column.prop]" :active-value="1"
                               :inactive-value="0" disabled></el-switch>
                    <!-- 行内显示tag标签 -->
                    <span v-else-if="column.tagFlag==true">
                        <span v-for="item in column.tagFormatter" :key="item.value">
                            <el-tag v-if="item.value==scope.row[column.prop]" :type="item.type">{{ item.text }}</el-tag>
                        </span>
                    </span>
                    <!-- 行内格式自定义 -->
                    <span v-else-if="column.formatter"> {{ column.formatter(scope.row) }}</span>
                    <!--默认显示文本-->
                    <span v-else>{{ scope.row[column.prop] }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="140" class-name="small-padding">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleFormat(scope.row.id)"> 赛程分配</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表格-页脚区域 -->
        <pagination v-show="tableTotal>0" :total="tableTotal" :page.sync="pageRequest.pageNum"
                    :limit.sync="pageRequest.pageSize" @pagination="getList"/>

        <!-- 赛程分配-->
        <el-dialog :title="formatListName" :visible.sync="getFormatListVisible" :close-on-click-modal="false"
                   width="65%" top="5vh">
            <el-table v-loading="listLoadingFormat" :data="tableListFormat" border fit highlight-current-row
                      style="width: 100%;">
                <el-table-column
                    v-for="column in columnFormat"
                    :key="column.prop"
                    :prop="column.prop"
                    :label="column.label"
                    :width="column.width"
                    :align="column.align?column.align:'center'"
                    :min-width="column.minWidth"
                    :sortable="column.sortable"
                    :fixed="column.fixed"
                    :type="column.type"
                    :formatter="column.formatter">
                    <template slot-scope="scope">
                        <!-- 行内格式自定义 -->
                        <span v-if="column.formatter"> {{ column.formatter(scope.row) }}</span>
                        <!--默认显示文本-->
                        <span v-else>{{ scope.row[column.prop] }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" width="240" class-name="small-padding">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleScore(scope.row.id)"> 团队成绩
                        </el-button>
                        <el-button v-if="dataForm.matchGroup === 1" type="primary" size="mini"
                                   @click="handleScore()"> 个人成绩
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 表格-页脚区域 -->
            <pagination v-show="tableTotalFormat>0" :total="tableTotalFormat"
                        :page.sync="pageRequestFormat.pageNum"
                        :limit.sync="pageRequestFormat.pageSize" @pagination="showFormatList"/>

            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click.native="formatCloseDialog()">关闭</el-button>
            </div>
        </el-dialog>

        <!-- 赛程成绩-->
        <el-dialog :title="scoreListName" :visible.sync="getScoreListVisible" :close-on-click-modal="false"
                   width="65%" top="5vh">
            <el-table v-loading="listLoadingScore" :data="tableListScore" border fit highlight-current-row
                      style="width: 100%;">
                <el-table-column
                    v-for="column in columnScore"
                    :key="column.prop"
                    :prop="column.prop"
                    :label="column.label"
                    :width="column.width"
                    :align="column.align?column.align:'center'"
                    :min-width="column.minWidth"
                    :sortable="column.sortable"
                    :fixed="column.fixed"
                    :type="column.type"
                    :formatter="column.formatter">
                    <template slot-scope="scope">
                        <!-- 行内格式自定义 -->
                        <span v-if="column.formatter"> {{ column.formatter(scope.row) }}</span>
                        <!-- 行内显示tag标签 -->
                        <span v-else-if="column.tagFlag==true">
                            <span v-for="item in column.tagFormatter" :key="item.value">
                                <el-tag v-if="item.value==scope.row[column.prop]" :type="item.type">{{ item.text }}</el-tag>
                            </span>
                        </span>
                        <!--默认显示文本-->
                        <span v-else>{{ scope.row[column.prop] }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" class-name="small-padding" label="操作" width="140">
                    <template slot-scope="scope">
<!--                        <el-button v-if="scope.row.updateType === 1" size="mini" type="primary" @click="handleFormat(scope.row.id)"> 晋级</el-button>-->
                        <el-button v-if="scope.row.updateType === 1" size="mini" type="primary" @click="promotionFormat(scope.row.userId,scope.row.formatId,scope.row.arrangeOrder,scope.row.matchId)"> 晋级</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 表格-页脚区域 -->
            <pagination v-show="tableTotalScore>0" :total="tableTotalScore"
                        :page.sync="pageRequestScore.pageNum"
                        :limit.sync="pageRequestScore.pageSize" @pagination="showScoreList"/>

            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click.native="scoreCloseDialog()">关闭</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 分页栏信息
import {deleteJdMatch, getFormatListPage, getMatchScoreList, getOnMatchList,handlePromotion} from '@/api/modules/match'
import AreaCascade from '@/components/AreaCascade'
import {inviteToBeAnchorById} from "@/api/modules/appUser";

export default {
    name: 'match',
    components: {
        Pagination,
        AreaCascade
    },
    directives: {},
    filters: {},
    data() {
        return {
            tableKey: 0,
            tableList: [],//表格数据源
            tableTotal: 0,//表格总条数数据
            listLoading: true,
            pageRequest: {pageNum: 1, pageSize: 10,},
            searchParam: {},
            dialogFormVisible: false,//默认不显示弹出框
            operation: true, // true:新增, false:编辑
            editLoading: false,//保存表单时loading框
            columns: [
                {prop: 'name', label: '赛事名称', sortable: false},
                {prop: 'typeName', label: '赛事分类', sortable: false},
                {prop: 'description', label: '比赛要求', sortable: false},
                {prop: 'signCount', label: '参赛人数', sortable: false},
                {
                    prop: 'matchGroup', label: '参赛范围', sortable: false, tagFlag: true,
                    tagFormatter: [
                        {text: '单人', value: 1, type: 'success'},
                        {text: '团体', value: 2, type: 'warn'}
                    ]
                },
                {prop: 'itemNames', label: '赛事项目', sortable: false},
                {prop: 'startTime', label: '开始时间', sortable: false},
                {prop: 'endTime', label: '结束时间', sortable: false},
                // {prop: 'cu', label: '创建机构', sortable: false},
                // {prop: 'ct', label: '创建时间', sortable: false},
            ],
            fileList: [],
            // 新增编辑界面数据
            dataForm: {},
            //表单检验规则
            dataFormRules: {
                id: [{required: true, message: '请输入', trigger: 'blur'}],
                name: [{required: true, message: '请输入赛事名称', trigger: 'blur'}],
                province: [{required: true, message: '请选择省市县', trigger: 'blur'}],
                city: [{required: true, message: '请输入市', trigger: 'blur'}],
                area: [{required: true, message: '请输入县', trigger: 'blur'}],
                type: [{required: true, message: '请输入赛事分类', trigger: 'blur'}],
                description: [{required: true, message: '请输入比赛要求', trigger: 'blur'}],
                signCount: [{required: true, message: '请输入参赛人数', trigger: 'blur'}],
                matchGroup: [{required: true, message: '请选择参赛范围（1单人/2团体）', trigger: 'blur'}],
                matchItem: [{required: true, message: '请选择参赛项目（1单项/2多项）', trigger: 'blur'}],
                payType: [{required: true, message: '请选择付费方式 0免费1可用金币2纯钱', trigger: 'blur'}],
                startTime: [{required: true, message: '请输入开始时间', trigger: 'blur'}],
                endTime: [{required: true, message: '请输入结束时间', trigger: 'blur'}],
                cu: [{required: true, message: '请输入创建机构', trigger: 'blur'}],
                ct: [{required: true, message: '请输入创建时间', trigger: 'blur'}],
                signPrice: [{required: true, message: '请输入创建时间', trigger: 'blur'}],
            },

            //赛程分配
            matchId: '',
            matchGroup: '',
            formatListName: '赛程分配',
            getFormatListVisible: false, // 属性值列表页 隐藏
            operationFormat: true, // true:新增, false:编辑
            pageRequestFormat: {pageNum: 1, pageSize: 10},
            dialogFormVisibleFormat: false, // 默认不显示弹出框
            listLoadingFormat: true,
            tableListFormat: [], // 表格数据源
            tableTotalFormat: 0,
            columnFormat: [
                {prop: 'startTime', label: '开始时间', sortable: false},
                {prop: 'endTime', label: '结束时间', sortable: false},
                {prop: 'arrangeOrder', label: '进行顺序', sortable: false,formatter:this.formatArrangeOrder},
            ],

            //赛程成绩
            formatId: '',
            scoreListName: '赛程成绩',
            getScoreListVisible: false, // 属性值列表页 隐藏
            operationScore: true, // true:新增, false:编辑
            pageRequestScore: {pageNum: 1, pageSize: 10},
            dialogFormVisibleScore: false, // 默认不显示弹出框
            listLoadingScore: true,
            tableListScore: [], // 表格数据源
            tableTotalScore: 0,
            columnScore: [
                {prop: 'userName', label: '用户', sortable: false},
                {prop: 'groupName', label: '团队', sortable: false},
                {prop: 'itemNames', label: '项目', sortable: false},
                {prop: 'score', label: '分数', sortable: false},
                {
                    prop: 'isUpdate', label: '晋级情况', sortable: false, tagFlag: true,
                    tagFormatter: [
                        {text: '未晋级', value: 0, type: 'warning'},
                        {text: '已晋级', value: 1, type: 'success'}
                    ]
                },
            ],
            columnScoreGroup: [
                {prop: 'groupName', label: '团队', sortable: false},
                {prop: 'itemNames', label: '项目', sortable: false},
                {prop: 'score', label: '分数', sortable: false},
            ],
        }
    },
    methods: {
        //获取表格数据
        getList() {
            this.listLoading = true
            //【API请求】----获取表格列表数据
            getOnMatchList(this.pageRequest).then(response => {
                response = response.result
                // console.log(response);
                this.tableList = response.list
                this.tableTotal = response.total
                this.listLoading = false;
            }).catch((res) => {
                this.$message({message: res.msg, type: 'error'})
            })
        },
        //表格数据筛选
        handleFilter() {
            this.pageRequest.searchParam = this.searchParam
            this.getList()
        },
        //【按钮点击】--- 弹出赛程表单
        showFormatList() {
            this.handleFormat(this.matchId);
        },
        handleFormat(matchId) {
            this.matchId = matchId
            this.listLoadingFormat = true
            this.getFormatListVisible = true
            const params = {
                matchId: matchId,
                pageNum: this.pageRequestFormat.pageNum,
                pageSize: this.pageRequestFormat.pageSize
            }
            getFormatListPage(params).then(response => {
                response = response.result
                // console.log(response);
                this.tableListFormat = response.list
                this.tableTotalFormat = response.total
                this.listLoadingFormat = false;
            }).catch((res) => {
                this.$message({message: res.msg, type: 'error'})
            })
        },
        //【晋级】
        promotionFormat(userId,formatId,arrangeOrder,matchId){
            this.$confirm('确认晋级吗？', '提示', {}).then(() => {
                const params = {
                    userId: userId,
                    formatId: formatId,
                    arrangeOrder: arrangeOrder,
                    matchId: matchId,
                    state: 1
                }
                handlePromotion(params).then(response => {
                    if(response.code == 500){
                        this.$message({ message: response.message, type: 'error' })
                        this.handleScore(this.formatId);
                    }else{
                        this.$message({ message: response.message, type: 'success' })
                        this.handleScore(this.formatId);
                    }
                }).catch(() => {
                    this.$message({message: '晋级失败', type: 'error'})
                })
            }).catch(() => {
                this.$message({message: '晋级失败', type: 'error'})
            })
        },
        //【按钮点击】--- 弹出成绩表单
        showScoreList() {
            this.handleScore(this.formatId);
        },
        handleScore(formatId) {
            this.formatId = formatId
            this.listLoadingScore = true
            this.getScoreListVisible = true
            const params = {
                formatId: formatId,
                pageNum: this.pageRequestScore.pageNum,
                pageSize: this.pageRequestScore.pageSize
            }
            getMatchScoreList(params).then(response => {
                response = response.result
                this.tableListScore = response.content
                this.tableTotalScore = response.total
                this.listLoadingScore = false;
            }).catch((res) => {
                this.$message({message: res.msg, type: 'error'})
            })
        },
        formatArrangeOrder(row){
            switch (row.arrangeOrder){
                case 1:
                    return "初赛"
                case 2:
                    return "复赛"
                case 3:
                    return "决赛"
                default:
                    return "决赛"
            }
        },
        //初始化表单数据，重新渲染
        initDataForm() {
            this.dataForm = {
                id: '',
                name: '',
                province: '',
                city: '',
                area: '',
                type: '',
                description: '',
                signCount: '',
                matchGroup: '',
                matchItem: '',
                payType: '',
                startTime: '',
                endTime: '',
                cu: '',
                ct: '',
                state: '',
                remark: '',
                signPrice: '',
                isCenterPush: '',
            };
        },
        //关闭表单弹出框
        closeDialog() {
            this.$refs['dataForm'].resetFields();
            this.dialogFormVisible = false
        },
        // 重置按钮
        searchReset() {
            this.searchParam = {}
            this.pageRequest = {pageNum: 1, pageSize: 10}
            this.getList()
        },
        formatCloseDialog() {
            this.getFormatListVisible = false
        },
        scoreCloseDialog() {
            this.getScoreListVisible = false
        },
    },
    created() {
        this.getList();
    },
}
</script>
